<template>
  <div class="company-wrap">
    <div class="container">
      <div class="form-card">
        <div class="card-header">
          <div class="header-icon">
            <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M3 21H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M5 21V7L13 2L21 7V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M9 9V13H15V9" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M9 21V17H15V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          <h1 class="card-title">完善企业信息</h1>
          <p class="card-subtitle">填写您的企业详细信息，让求职者更了解您的公司</p>
        </div>
        
        <el-form ref="formRef" :model="form" :rules="rules" label-width="0" class="company-form">
          <div class="form-section">
            <div class="section-label">企业Logo</div>
            <div class="logo-section">
              <el-upload 
                :show-file-list="false" 
                :auto-upload="false" 
                :before-upload="() => false" 
                :on-change="(f)=>onSelect(f,'logo')"
                class="logo-uploader"
              >
                <div class="logo-wrapper">
                  <div class="logo-box">
                    <el-image
                      v-if="displaySrc.logo"
                      :src="displaySrc.logo"
                      fit="cover"
                      class="logo-img"
                    />
                    <div v-else class="logo-placeholder">
                      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M17 8L12 3L7 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M12 3V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      </svg>
                    </div>
                    <div class="logo-overlay">
                      <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path d="M21 15V19C21 19.5304 20.7893 20.0391 20.4142 20.4142C20.0391 20.7893 19.5304 21 19 21H5C4.46957 21 3.96086 20.7893 3.58579 20.4142C3.21071 20.0391 3 19.5304 3 19V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M17 8L12 3L7 8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                        <path d="M12 3V15" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                      </svg>
                    </div>
                  </div>
                  <div class="logo-hint">点击上传企业Logo</div>
                </div>
              </el-upload>
              <el-button 
                v-if="!logoUploaded"
                class="upload-btn" 
                type="primary" 
                :loading="uploadingLogo" 
                @click="() => onUpload('logo')"
                :disabled="!selected.logo"
              >
                确认上传
              </el-button>
              <div v-else class="upload-success">
                <span class="success-text">✓ Logo上传成功</span>
                <el-button 
                  class="reupload-btn" 
                  size="small" 
                  @click="handleLogoReupload"
                >
                  重新上传
                </el-button>
              </div>
            </div>
          </div>

          <div class="form-section">
            <div class="section-label">基础信息</div>
            <el-form-item prop="name">
              <el-input 
                v-model="form.name" 
                placeholder="请输入企业全称" 
                size="large"
                class="form-input"
              >
                <template #prefix>
                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="input-icon">
                    <path d="M3 21H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M5 21V7L13 2L21 7V21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="short_name">
              <el-input 
                v-model="form.short_name" 
                placeholder="请输入企业简称" 
                size="large"
                class="form-input"
              >
                <template #prefix>
                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="input-icon">
                    <path d="M4 19.5C4 18.5717 4.36875 17.6815 5.02513 17.0251C5.6815 16.3687 6.57174 16 7.5 16H16.5C17.4283 16 18.3185 16.3687 18.9749 17.0251C19.6313 17.6815 20 18.5717 20 19.5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </template>
              </el-input>
            </el-form-item>
            <div class="form-row">
              <el-form-item prop="scale" class="form-item-half">
                <el-select
                  v-model="form.scale"
                  placeholder="请选择公司规模"
                  size="large"
                  class="form-input"
                  filterable
                  clearable
                >
                  <el-option
                    v-for="opt in companyScaleOptions"
                    :key="opt.value"
                    :label="opt.label"
                    :value="opt.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item prop="industry" class="form-item-half">
                <el-select
                  v-model="form.industry"
                  placeholder="请选择所属行业"
                  size="large"
                  class="form-input"
                  filterable
                  clearable
                >
                  <el-option
                    v-for="opt in industryOptions"
                    :key="opt.value"
                    :label="opt.label"
                    :value="opt.value"
                  />
                </el-select>
              </el-form-item>
            </div>
          </div>

          <div class="form-section">
            <div class="section-label">详细信息</div>
            <el-form-item prop="address">
              <el-input 
                v-model="form.address" 
                placeholder="请输入公司详细地址" 
                size="large"
                class="form-input"
              >
                <template #prefix>
                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="input-icon">
                    <path d="M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 7.61305 3.94821 5.32387 5.63604 3.63604C7.32387 1.94821 9.61305 1 12 1C14.3869 1 16.6761 1.94821 18.364 3.63604C20.0518 5.32387 21 7.61305 21 10Z" stroke="currentColor" stroke-width="2"/>
                    <path d="M12 13C13.6569 13 15 11.6569 15 10C15 8.34315 13.6569 7 12 7C10.3431 7 9 8.34315 9 10C9 11.6569 10.3431 13 12 13Z" stroke="currentColor" stroke-width="2"/>
                  </svg>
                </template>
              </el-input>
            </el-form-item>
            <el-form-item prop="description">
              <el-input 
                type="textarea" 
                v-model="form.description" 
                :rows="4" 
                placeholder="请输入公司简介，包括主营业务、发展历程、企业文化等" 
                class="form-textarea"
              />
            </el-form-item>
            <el-form-item prop="business_license">
              <el-input 
                v-model="form.business_license" 
                placeholder="请输入企业工商注册号" 
                size="large"
                class="form-input"
              >
                <template #prefix>
                  <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="input-icon">
                    <path d="M14 2H6C5.46957 2 4.96086 2.21071 4.58579 2.58579C4.21071 2.96086 4 3.46957 4 4V20C4 20.5304 4.21071 21.0391 4.58579 21.4142C4.96086 21.7893 5.46957 22 6 22H18C18.5304 22 19.0391 21.7893 19.4142 21.4142C19.7893 21.0391 20 20.5304 20 20V8L14 2Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M14 2V8H20" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M16 13H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M16 17H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                    <path d="M10 9H9H8" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </template>
              </el-input>
            </el-form-item>
          </div>

          <div class="form-actions">
            <el-button 
              type="primary" 
              size="large" 
              :loading="submitting" 
              @click="onCreate"
              class="submit-btn"
            >
              完成创建
              <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="btn-icon">
                <path d="M20 6L9 17L4 12" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { uploadAvatar, submitCompanyInfo } from '../src/api/enterprise.js'

const router = useRouter()
const formRef = ref()
const submitting = ref(false)
const uploadingLogo = ref(false)
const uploadingLicense = ref(false)
const logoUploaded = ref(false)
const selected = reactive({ logo: null, license: null })
const preview = reactive({ logo: '', license: '' })
const displaySrc = reactive({ logo: '', license: '' })

const form = reactive({
  name: '',
  short_name: '',
  scale: '',
  description: '',
  address: '',
  industry: '',
  business_license: '',
  logo: '',
  license_image: ''
})

// 下拉选项：公司规模与行业
const companyScaleOptions = [
  { value: '1-50', label: '1-50人' },
  { value: '50-100', label: '50-100人' },
  { value: '100-500', label: '100-500人' },
  { value: '500-1000', label: '500-1000人' },
  { value: '1000+', label: '1000人以上' },
]

const industryOptions = [
  { value: 'internet', label: '互联网' },
  { value: 'finance', label: '金融' },
  { value: 'education', label: '教育' },
  { value: 'healthcare', label: '医疗' },
  { value: 'manufacturing', label: '制造业' },
  { value: 'real_estate', label: '房地产' },
  { value: 'other', label: '其他' },
]

const rules = {
  name: [{ required: true, message: '请输入企业全称', trigger: 'blur' }],
  short_name: [{ required: true, message: '请输入企业简称', trigger: 'blur' }],
  scale: [{ required: true, message: '请选择公司规模', trigger: 'change' }],
  description: [{ required: true, message: '请输入公司简介', trigger: 'blur' }],
  address: [{ required: true, message: '请输入公司地址', trigger: 'blur' }],
  industry: [{ required: true, message: '请选择所属行业', trigger: 'change' }],
  business_license: [{ required: true, message: '请输入工商号', trigger: 'blur' }]
}

function onSelect(file, key) {
  selected[key] = file.raw || file
  if (selected[key]) {
    preview[key] = URL.createObjectURL(selected[key])
    displaySrc[key] = preview[key]
  }
}

async function onUpload(key) {
  const file = selected[key]
  if (!file) {
    ElMessage.warning('请先选择图片')
    return
  }
  if (key === 'logo') uploadingLogo.value = true
  if (key === 'license') uploadingLicense.value = true
  try {
    const type = key === 'logo' ? 'logo' : 'license'
    const res = await uploadAvatar(file, type)
    if (res && res.status === 'success' && res.image_url) {
      if (key === 'logo') {
        form.logo = res.image_url
        logoUploaded.value = true
        selected.logo = null
      }
      if (key === 'license') form.license_image = res.image_url
      displaySrc[key] = res.image_url
      ElMessage.success('上传成功')
    } else {
      ElMessage.error(res?.error || '上传失败')
    }
  } catch (e) {
    ElMessage.error(e?.response?.data?.error || '上传失败')
  } finally {
    uploadingLogo.value = false
    uploadingLicense.value = false
  }
}

function handleLogoReupload() {
  logoUploaded.value = false
  selected.logo = null
  preview.logo = ''
  displaySrc.logo = ''
  form.logo = ''
}

// 监听Logo URL变化，如果已有URL则显示为已上传状态
watch(() => form.logo, (newVal) => {
  if (newVal && !logoUploaded.value) {
    logoUploaded.value = true
    displaySrc.logo = newVal
  }
}, { immediate: true })

function getPersonalTemp() {
  try {
    return JSON.parse(localStorage.getItem('recruiterInfoTemp') || '{}')
  } catch {
    return {}
  }
}

const onCreate = () => {
  formRef.value.validate(async (valid) => {
    if (!valid) return
    submitting.value = true
    try {
      const personal = getPersonalTemp()
      const token = localStorage.getItem('token') || ''
      const res = await submitCompanyInfo({ personal, company: { ...form }, token })
      if (res && res.status === 'success') {
        ElMessage.success('企业认证成功')
        localStorage.removeItem('recruiterInfoTemp')
        router.push('/enterprise/main')
      } else {
        ElMessage.error(res?.error || '企业验证失败，请重新填写')
      }
    } catch (e) {
      ElMessage.error(e?.response?.data?.error || '企业验证失败，请重新填写')
    } finally {
      submitting.value = false
    }
  })
}
</script>

<style scoped>
.company-wrap {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.container {
  width: 100%;
  max-width: 800px;
}

.form-card {
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  padding: 48px 56px;
  animation: slideUp 0.5s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-header {
  text-align: center;
  margin-bottom: 40px;
}

.header-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.header-icon svg {
  width: 32px;
  height: 32px;
}

.card-title {
  font-size: 32px;
  font-weight: 700;
  color: #1a202c;
  margin: 0 0 8px 0;
  letter-spacing: -0.5px;
}

.card-subtitle {
  font-size: 15px;
  color: #718096;
  margin: 0;
}

.company-form {
  margin-top: 0;
}

.form-section {
  margin-bottom: 32px;
}

.section-label {
  font-size: 14px;
  font-weight: 600;
  color: #4a5568;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.logo-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.logo-uploader {
  width: 100%;
  display: flex;
  justify-content: center;
}

.logo-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: pointer;
}

.logo-box {
  width: 140px;
  height: 140px;
  border-radius: 16px;
  background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  border: 3px solid #e2e8f0;
  transition: all 0.3s ease;
}

.logo-wrapper:hover .logo-box {
  border-color: #667eea;
  transform: scale(1.05);
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
}

.logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.logo-placeholder {
  width: 56px;
  height: 56px;
  color: #cbd5e0;
}

.logo-placeholder svg {
  width: 100%;
  height: 100%;
}

.logo-overlay {
  position: absolute;
  inset: 0;
  background: rgba(102, 126, 234, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 16px;
}

.logo-wrapper:hover .logo-overlay {
  opacity: 1;
}

.logo-overlay svg {
  width: 40px;
  height: 40px;
}

.logo-hint {
  font-size: 14px;
  color: #718096;
  font-weight: 500;
}

.upload-btn {
  min-width: 140px;
  height: 44px;
  border-radius: 12px;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
}

.upload-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

.upload-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.upload-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.success-text {
  color: #00c293;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}

.reupload-btn {
  border-radius: 8px;
  color: #667eea;
  border-color: #667eea;
}

.reupload-btn:hover {
  background: #f0f4ff;
  border-color: #667eea;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-item-half {
  margin-bottom: 20px;
}

.form-input {
  border-radius: 12px;
}

.form-input :deep(.el-input__wrapper) {
  border-radius: 12px;
  box-shadow: 0 0 0 1px #e2e8f0 inset;
  padding: 12px 16px;
  transition: all 0.3s ease;
}

.form-input :deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #cbd5e0 inset;
}

.form-input :deep(.el-input.is-focus .el-input__wrapper) {
  box-shadow: 0 0 0 2px #667eea inset;
}

.input-icon {
  width: 20px;
  height: 20px;
  color: #a0aec0;
  margin-right: 8px;
}

.form-input :deep(.el-input__inner) {
  font-size: 15px;
  color: #2d3748;
}

.form-textarea {
  border-radius: 12px;
}

.form-textarea :deep(.el-textarea__inner) {
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  padding: 12px 16px;
  font-size: 15px;
  color: #2d3748;
  transition: all 0.3s ease;
  resize: vertical;
}

.form-textarea :deep(.el-textarea__inner:hover) {
  border-color: #cbd5e0;
}

.form-textarea :deep(.el-textarea__inner:focus) {
  border-color: #667eea;
  box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1);
}

.el-form-item {
  margin-bottom: 20px;
}

.form-actions {
  margin-top: 40px;
  display: flex;
  justify-content: center;
}

.submit-btn {
  min-width: 200px;
  height: 52px;
  border-radius: 12px;
  font-size: 16px;
  font-weight: 600;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.submit-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(102, 126, 234, 0.5);
}

.submit-btn:active:not(:disabled) {
  transform: translateY(0);
}

.btn-icon {
  width: 20px;
  height: 20px;
}

@media (max-width: 768px) {
  .form-card {
    padding: 32px 24px;
    border-radius: 16px;
  }

  .card-title {
    font-size: 24px;
  }

  .logo-box {
    width: 120px;
    height: 120px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}
</style>


